<template>
  <div class="wechat-info">
    <view
      :style="{
        height: navbarHeight + statusBarHeight + 'px',
        width: screenWidth,
      }"
      class="navBar"
      ><text class="nav-title"> 我的 </text></view
    >
    <view class="wechat-info-main flex-align-center">
      <u-avatar :src="userInfo.headImg" size="150rpx"></u-avatar>
      <div class="wechat-info-content">
        <div class="wxName">{{ userInfo.customerName }}</div>
        <div class="phone">
          <text v-if="userInfo.phone">{{ userInfo.phone }}</text>
        </div>
      </div>
    </view>
    <view class="card-container-box"></view>
    <view class="card-container flex-align-center">
      <view
        class="card-item flex"
        @click="
          $Router.push({
            name: 'myCoupon',
          })
        "
      >
        <view class="icon-content">
          <image
            src="https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/39/20230306/8ce1e381-9188-4338-a6e5-f68c7a26dc33.png"
            class="iconfont"
          />
          <!--          <view class="icon iconfont icon-huiyuanqianbao"></view>-->
        </view>
        <view class="balance-content">
          <view class=""
            ><text class="balance-num">{{ couponCount }}</text
            >张</view
          >
          <view class="balance-text">我的券</view>
        </view>
      </view>
      <view
        class="card-item flex"
        @click="
          $Router.push({
            name: 'memberList',
          })
        "
      >
        <view class="icon-content">
          <image
            src="https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/39/20230306/20adb04e-a8f5-4aae-9710-9c47670459bf.png"
            class="iconfont"
          />
        </view>
        <view class="balance-content">
          <view class=""
            ><text class="balance-num">{{ balanceNum | formatCurrency }}</text>
            元</view
          >
          <view class="balance-text">我的余额</view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getMyBalanceNum,
  getMyCouponCount,
} from "@/service/api/sp-common/user";

export default {
  name: "index",
  computed: {
    ...mapState("sp-common/user", ["userInfo"]),
  },
  data() {
    return {
      navbarHeight: 44,
      statusBarHeight: 44,
      screenWidth: "100vw",
      paddingRight: 100,
      balanceNum: 0,
      couponCount: 0,
    };
  },
  created() {
    this.innit();
  },
  mounted() {
    this.computedHeight();
  },
  methods: {
    async innit() {
      this.balanceNum = await getMyBalanceNum();
      this.couponCount = await getMyCouponCount();
    },
    computedHeight() {
      let sysInfo = uni.getSystemInfoSync();
      let custom = uni.getMenuButtonBoundingClientRect();
      let { screenWidth, statusBarHeight } = sysInfo;
      let { left: customLeft, width: customWidth } = custom;
      // 计算胶囊右边距离
      this.screenWidth = screenWidth + "px";
      this.paddingLeft = screenWidth - (customLeft + customWidth);
      this.navbarHeight = (custom.top - statusBarHeight) * 2 + custom.height;
      this.statusBarHeight = statusBarHeight;
      this.paddingRight = this.paddingLeft + customWidth;
    },
  },
};
</script>

<style scoped lang="scss">
.navBar {
  position: relative;
  .nav-title {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.wechat-info {
  font-family: PingFang SC;
  padding-bottom: 69rpx;
  background-image: url("https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/39/20230306/a0218455-b782-4f2b-80ff-6d04f0da9546.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  background-color: #f7f7f7;
  .card-container-box {
    width: 100vw;
    height: 27rpx;
    background-color: transparent;
  }
  .card-container {
    width: 100vw;
    //bottom: 0;
    position: absolute;
    z-index: 111;
    .card-item {
      width: 345rpx;
      height: 138rpx;
      align-items: flex-end;
      background: #ffffff;
      border-radius: 8px;
      margin: 0 auto;
      .balance-content {
        flex: 1;
      }
      .icon-content {
        width: 94rpx;
        height: 109rpx;
      }
      .balance-content {
        text-align: right;
        padding-right: 32rpx;
        padding-bottom: 19rpx;
        .balance-num {
          font-size: 32rpx;
          font-family: DIN;
          font-weight: 500;
          color: #131313;
          margin-right: 12rpx;
        }
        .balance-text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #555555;
        }
      }
    }
    .iconfont {
      width: 100%;
      height: 100%;
      opacity: 0.67;
      font-size: 109rpx;
      border-radius: 8rpx;
    }
  }
  &-main {
    padding: 0 33rpx;
  }
  &-content {
    margin-left: 26rpx;
    .wxName {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    .phone {
      margin-top: 29rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
